<template>
  <div>
    <div class="keyboard" v-if="showKeyboard">
      <div>
        <el-input placeholder="请填写备注" v-model="remark">
          <template slot="append">{{ amount }}</template>
        </el-input>
      </div>
      <div class="tags">
        <el-popover
            placement="top"
            width="400"
            height="400"
            ref="popover"
            popper-class="custom-popover"
            trigger="click">
          <el-calendar v-model="accountDate">
            <div
                slot="dateCell"
                slot-scope="{ data }"
                @click="allcalendar(data)"
                class="temp"
            >
              <p :class="data.isSelected ? 'is-selected-1' : ''">
                {{ data.day.split("-").slice(2).join("-") }}
              </p>
            </div>
          </el-calendar>
          <div class="tag" slot="reference"><i class="el-icon-time" v-if="date==='今天'"></i>{{ date }}</div>
        </el-popover>
        <div class="tag">支付方式</div>
        <div class="tag">默认账本</div>
      </div>
      <div class="number">
        <div
            @click="chooseKey(item)"
            v-for="(item,index) in lists"
            :key="index"
            class="numberItem">
          {{ item.label }}
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import accountApi from "@/api/accountApi";
import {getNowFormatDate} from "@/utils/common";

export default {
  components: {},
  props: {
    itemId: {
      type: String
    }
  },
  data() {
    return {
      accountViewType: '',
      viewFrom: '',
      showKeyboard: true,
      showFooter: true,
      showPicker: false,
      itemName: "",
      remark: "",
      amount: "",
      accountDate: "",
      date: "今天",
      pickerVisible: '',
      lists: [{
        value: '7',
        label: '7'
      }, {
        value: '8',
        label: '8'
      }, {
        value: '9',
        label: '9'
      }, {
        value: "delete",
        label: '删除',
      }, {
        value: '4',
        label: '4'
      }, {
        value: '5',
        label: '5'
      }, {
        value: '6',
        label: '6'
      }, {
        value: '+',
        label: '+'
      },
        {
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '-',
          label: '-'
        },
        {
          value: '.',
          label: '.'
        },
        {
          value: '0',
          label: '0'
        }, {
          value: 'clear',
          label: '清空',
        }, {
          value: 'ok',
          label: '完成'
        }
      ],
      num1: "",
      num2: "",
      op: "",
      active: null,
      mainView: 'detailView',
      idx: 0
    }
  },
  methods: {
    allcalendar(data) {
      console.log(data.day)
      this.date = data.day.replaceAll("-", "/")
      // 关闭popover的方法
      this.$refs.popover.doClose();

    },

    chooseKey(item) {
      let val = item.value;
      // 实现删除效果
      if (val === "delete") {
        if (this.num2.length !== 0) {
          this.num2 = this.num2.substring(0, this.num2.length - 1);
        } else if (this.op.length !== 0) {
          this.op = "";
        } else {
          this.num1 = this.num1.substring(0, this.num1.length - 1);
        }
      }
      if (val === "clear") {
        this.amount = "";
        this.num1 = "";
        this.op = "";
        this.num2 = "";
        return;
      }
      // 实现小数点部分功能
      if (val === ".") {
        if (this.op === "") {
          if (this.num1.indexOf(".") > -1 || this.num1.length === 0) {
            return;
          } else {
            this.num1 = this.num1 + val;
          }
        } else {
          if (this.num2.indexOf(".") > -1 || this.num2.length === 0) {
            return;
          } else {
            this.num2 = this.num2 + val;
          }
        }
      }

      // 实现数字部分
      // 1.小数部分最后只能有两位
      // 2.整数部分只能有6位
      if (val >= 0 && val <= 9) {
        if (this.op === "") {
          if (this.num1 === "") {
            this.num1 = val;
          } else {
            if (this.num1.indexOf(".") === this.num1.length - 3 && this.num1.indexOf(".") !== -1) {
              return;
            } else if ((this.num1.indexOf(".") !== -1 && this.num1.length === 9) || (this.num1.indexOf(".") === -1 && this.num1.length === 6)) {
              return;
            } else {
              this.num1 = this.num1 + val;
            }
          }
        } else {
          if (this.num2.indexOf(".") === this.num2.length - 3 && this.num2.indexOf(".") !== -1) {
            return;
          } else if ((this.num2.indexOf(".") !== -1 && this.num2.length === 9) || (this.num2.indexOf(".") === -1 && this.num2.length === 6)) {
            return;
          } else {
            this.num2 = this.num2 + val;
            this.lists[15].label = "=";
          }
        }
      }

      if (val === "+" || val === "-") {
        if (this.num1 === "" && val === "+" || this.num1.length > 8) {
          return;
        } else if (this.num1 === "" && val === "-") {
          this.num1 = val;
        } else if (this.num1 !== "") {
          if (this.num1 === "-") {
            return;
          } else if (this.num2 === "") {
            this.op = val;
          } else if (this.num2 !== "") {
            if (this.op === "+") {
              this.num1 = ((this.num1 - 0) + (this.num2 - 0)).toFixed(2) + ""
              let length = this.num1.length;
              if (this.num1.substring(length - 3, length) === ".00") {
                this.num1 = this.num1.substring(0, length - 3)
              }
            } else {
              this.num1 = ((this.num1 - 0) - (this.num2 - 0)).toFixed(2) + "";
              let length = this.num1.length;
              if (this.num1.substring(length - 3, length) === ".00") {
                this.num1 = this.num1.substring(0, length - 3)
              }
            }
            this.op = val;
            this.num2 = "";
            this.lists[15].label = "完成";
          }
        }
      }

      if (val === "ok") {
        if (this.lists[15].label === '=') {
          if (this.op === "+") {
            this.num1 = ((this.num1 - 0) + (this.num2 - 0)).toFixed(2) + ""
            let length = this.num1.length;
            if (this.num1.substring(length - 3, length) === ".00") {
              this.num1 = this.num1.substring(0, length - 3)
            }
          } else {
            this.num1 = ((this.num1 - 0) - (this.num2 - 0)).toFixed(2) + ""
            let length = this.num1.length;
            if (this.num1.substring(length - 3, length) === ".00") {
              this.num1 = this.num1.substring(0, length - 3)
            }
          }
          this.op = "";
          this.num2 = "";
          this.lists[15].label = "完成";
        } else {
          if (this.amount === "") {
            return;
          }
          if (this.itemId === "") {
            this.$message({
              message: '收支类型不能为空',
              type: 'warning'
            });
          }
          let userId = window.localStorage.getItem("userId");
          if (this.date === "今天") {
            this.date = getNowFormatDate();
          }
          var budget = {
            userId: userId,
            typeId: this.itemId,
            amount: this.amount,
            remark: this.remark,
            addtime: this.date
          }
          accountApi.insertOrUpdateBudget(budget)
              .then((res) => {
                if (res.data.code == 200) {
                  this.exit();
                  this.mainView = 'detailView';
                }
              })
        }
      }

      this.amount = this.num1 + this.op + this.num2;
    },
    myDateSelect() {
      this.$refs.dateSelect.isShow = false;
      this.$refs.dateSelect.isShow1 = false;
    },
  }
}
</script>
<style scoped>
.number {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
}


.tags {
  margin: 5px 0;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}


.number .numberItem {
  height: 2.64533333rem;
  box-sizing: border-box;
  border: 4px solid #F4F4F4;
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>